<template>
  <div>
    <a-modal
      :title="config.title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="close"
    >
      <a-skeleton active v-if="contentLoading" />
      <slot v-else></slot>
    </a-modal>
  </div>
</template>
<script>
import { ref, computed, watch, toRefs } from "vue";
export default {
  props: {
    config: {
      type: Object,
      required: true,
    },
  },
  setup(props, { emit }) {
    let confirmLoading = ref(false);
    let contentLoading = ref(false);

    function close() {
      visible.value = false;
      if (props.config.onClose) props.config.onClose();
    }

    async function handleOk(e) {
      try {
        confirmLoading.value = true;
        if (props.config.onConfirm) await props.config.onConfirm();
        close();
        confirmLoading.value = false;
      } catch (error) {
        confirmLoading.value = false;
      }
    }

    let visible = ref(false);
    watch(visible, () => {
      if (visible.value) handleOpen();
    });

    async function handleOpen() {
      contentLoading.value = true;
      if (props.config.onOpen) await props.config.onOpen();
      contentLoading.value = false;
    }

    function show() {
      visible.value = true;
    }

    return {
      handleOk,
      contentLoading,
      confirmLoading,
      close,
      show,
      visible,
      showFooter: props.config.showFooter === false ? null : "11",
    };
  },
};
</script>
